<template>
  <a-modal
    :title="title"
    :visible="visible"
    :maskClosable="false"
    :width="800"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template>
      <div style="overflow: auto">
        <a-table
          rowKey="itemId"
          :columns="columnsFormat"
          :dataSource="dataSource"
          :pagination="false"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
        />
      </div>
    </template>
  </a-modal>
</template>

<script>
import { DATA_CODE_SUCCESS } from '@/utils/consts';
import { request, METHOD } from '@/utils/request';
const API_BASE_URL = require('@/services/baseUrl')

export default {
  name: 'customModal',
  data() {
    return {
      title: '关联数据',
      visible: false,
      oriData: {},
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      baseKeys: [],
      item: {}
    };
  },
  computed: {
    columnsFormat() {
      return this.columns.filter((col) => col.dataIndex !== 'itemId');
    }
  },
  methods: {
    show(columns, baseKeys, url, params, item) {
      this.columns = columns;
      this.visible = true;
      this.selectedRowKeys = baseKeys;
      this.item = item;
      this.dataSource = [];
      this.getList(url, params);
    },
    handleOk() {
      this.visible = false;
      this.$emit(
        'selectPopupData',
        // eslint-disable-next-line max-len
        { dataList: this.dataSource.filter((data) => this.selectedRowKeys.indexOf(data.itemId) > -1) },
        this.item
      );
    },
    handleCancel() {
      this.visible = false;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    async getList(url, params) {
      const response = await request(API_BASE_URL + url, METHOD.GET, params);
      if (response.data.code === DATA_CODE_SUCCESS) {
        // eslint-disable-next-line max-len
        this.dataSource = response.data.data.dataList;
      }
    }
  }
};
</script>
